<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>xh-qrcode</title>
  <link rel="stylesheet" href="./src/index.css" />
</head>

<body>
  <div class="dev-qrcode">
    <!-- <xh-qrcode value="hello world!" logo="./src/assets/vite.svg" errorcorrectionlevel="H" size="160" shape="round">
    </xh-qrcode> -->

    <xh-vcard-qrcode value="https://example.com/u/aGVsbG8gd29ybGQh" errorcorrectionlevel="H" shape="round"
      logo="./src/assets/vite.svg" avatar="/src/assets/avatars/1.jpg" name="满船清梦压星河" description="冰岛"
      tips="扫一扫上面的二维码图案，加我为朋友。" />
  </div>

  <div class="examples">
    <div class="example-item">
      <h3>基础二维码</h3>
      <xh-qrcode value="Basic QR Code"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>自定义颜色</h3>
      <xh-qrcode value="Colored QR Code" color="#00ff00" background="#000000"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>自定义大小</h3>
      <xh-qrcode value="Sized QR Code" size="200"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>高纠错级别</h3>
      <xh-qrcode value="High Error Correction" errorcorrectionlevel="H"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>带 logo</h3>
      <xh-qrcode value="With Logo" errorcorrectionlevel="H" logo="./src/assets/vite.svg"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>自定义 logo 大小</h3>
      <xh-qrcode value="Large Logo" errorcorrectionlevel="H" logo="./src/assets/vite.svg" logoscale="0.3"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>显示遮罩层</h3>
      <xh-qrcode value="Masked QR Code" mask></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>自定义遮罩层颜色</h3>
      <xh-qrcode value="Custom Mask Color" mask maskcolor="rgba(0, 0, 0, 0.8)"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>带遮罩层内容</h3>
      <xh-qrcode value="With Mask Content" mask>
        <span style="background: pink; padding: 4px; border-radius: 4px">Mask Content</span>
      </xh-qrcode>
    </div>
    <div class="example-item">
      <h3>群头像</h3>
      <div class="example-group-avatar"></div>
    </div>
    <div class="example-item">
      <h3>群二维码</h3>
      <xh-group-qrcode value="https://example.com/group?id=cXJjb2Rl" width="300" groupname="群聊：相亲相爱一家人"
        logo="./src/assets/vite.svg" errorcorrectionlevel="H" tips="该二维码7天内(2月30日前)有效，重新进入将更新" logoscale="0.2"
        shape="round"
        groupAvatars='["/src/assets/avatars/1.jpg", "/src/assets/avatars/2.jpg", "/src/assets/avatars/3.jpg", "/src/assets/avatars/4.jpg", "/src/assets/avatars/5.jpg", "/src/assets/avatars/6.jpg", "/src/assets/avatars/7.jpg", "/src/assets/avatars/8.jpg", "/src/assets/avatars/9.jpg"]' />
    </div>
    <div class="example-item">
      <h3>个人名片</h3>
      <xh-vcard-qrcode value="https://example.com/u/aGVsbG8gd29ybGQh" errorcorrectionlevel="H" shape="round"
        logo="./src/assets/vite.svg" avatar="/src/assets/avatars/1.jpg" name="满船清梦压星河" description="冰岛"
        tips="扫一扫上面的二维码图案，加我为朋友。" width="300" />
    </div>
    <div class="example-item">
      <h3>形状：圆点</h3>
      <xh-qrcode value="https://example.com/group?id=cXJjb2Rl" shape="circle"></xh-qrcode>
    </div>
    <div class="example-item">
      <h3>形状：圆角</h3>
      <xh-qrcode value="https://example.com/group?id=cXJjb2Rl" shape="round"></xh-qrcode>
    </div>
  </div>

  <script type="module" src="/src/main.ts"></script>
</body>

</html>